<template>
    <view class="bg my-machine-container">
        <u-sticky :zIndex="1000">
            <view class="head-box">
                <view class="head-box-avatar">
                    <u-avatar src="/static/default-avatar.png" size="64"></u-avatar>
                    <view class="head-box-avatar-gender">
                        <u-icon :name="empInfo.gender ? 'man' : 'woman'" :color="empInfo.gender ? '#2d8cf0' : '#f219da'" siza="15"></u-icon>
                    </view>
                </view>
                <view class="head-box-info">
                    <view class="head-box-info-name">{{ empInfo.name || '无' }}</view>
                    <view>{{ empInfo.workshopName || '无' }}</view>
                    <view class="flex-start-center">
                        <view class="margin-right-20">部门: {{ empInfo.deptName || '无' }}</view>
                        <view>岗位: {{ empInfo.postName || '无' }}</view>
                    </view>
                </view>
            </view>
            <view class="search-box">
                <view class="search-box-item" @click="selectDateTimePickerState = true">
                    <view class="item-gap">{{ searchParams.belongDate || '无' }}</view>
                    <u-icon name="arrow-down" size="18"></u-icon>
                </view>
                <view class="search-box-item" @click="onSelectShift">
                    <view class="item-gap">{{ searchParams.shiftName || '无' }}</view>
                    <u-icon name="arrow-down" size="18"></u-icon>
                </view>
                <view class="search-box-item" style="border: none;" @click="onSelectGroup">
                    <view class="item-gap">{{ searchParams.groupName || '无' }}</view>
                    <u-icon name="arrow-down" size="18"></u-icon>
                </view>
            </view>
        </u-sticky>
        <view class="article-box">
            <view
                v-for="(postItem, postIndex) in schedulePostData"
                :key="postIndex"
            >
                <view style="font-size: 28rpx;height: 64rpx;display: flex;align-items: center;border-bottom: solid 1rpx #eee;border-left: solid 4px #2d8cf0;padding-left: 12rpx;">{{ postItem.postName }}</view>
                <view class="machine-container">
                    <view
                        v-for="(machineItem, machineIndex) in postItem.machineList"
                        :key="machineIndex"
                        class="machine-item"
                    >
                        <u-tag
                            :text="machineItem.machineCode"
                            :closable="true"
                            size="large"
                            plain
                            plainFill
                            @close="onDeleteMachine(machineItem)"
                        ></u-tag>
                    </view>
                </view>
                <view class="margin-top-20" style="padding: 0 8rpx;">
                    <u-button type="default" icon="plus" size="default" @click="selectMachinePopupState = true" iconColor="#c5c8ce"></u-button>
                </view>
            </view>
        </view>
        <view class="footer-box">
            <u-button icon="scan" type="primary" size="large" @click="onScanBtn">扫码绑定</u-button>
        </view>
        <u-datetime-picker
            v-model="defaultTime"
            :show="selectDateTimePickerState"
            mode="date"
            :closeOnClickOverlay="true"
            @confirm="onConfirmBtnOfSelectPicker"
            @close="onCloseBtnOfSelectPicker"
            @cancel="onCloseBtnOfSelectPicker"
        ></u-datetime-picker>
        <select-machine-popup
            :selectedData="postMachineList"
            :form-data="searchParams"
            :show="selectMachinePopupState"
            @close="selectMachinePopupState = false"
            @confirm="onConfirmBtnOfSelectMachinePopup"
        ></select-machine-popup>
    </view>
</template>
<script>
import {
    machineManagerMachinePage,
    workforcemanagementScheduleEmpMachineDelete,
    workforceManagementScheduleEmpMachineMy
} from "../../../api";
import {formatDate, formatTime, tipBar} from "../../../utils/jk-utils";
    import selectMachinePopup from './components/select-machine-popup';
    export default {
        components: {
            selectMachinePopup
        },
        data() {
            return {
                schedulePostData: [
                    {
                        postName: '细纱挡车工',
                        machineList: [
                            {machineCode: 'XS001'},
                            {machineCode: 'XS001'},
                            {machineCode: 'XS001'},
                            {machineCode: 'XS001'},
                            {machineCode: 'XS001'},
                        ]
                    }
                ],
                selectMachinePopupState: false,
                selectDateTimePickerState: false,
                defaultTime: '',
                empInfo: {},
                searchParams: {
                    belongDate: '',
                    groupName: '',
                    shiftName: ''
                },
                scheduleShiftList: [],
                scheduleGroupList: [],
                postMachineList: [],
            };
        },
        methods: {
            onScanBtn() {
                // 允许从相机和相册扫码
                let _this = this;
                uni.scanCode({
                    success: function (res) {
                        let jsonData = {};
                        try {
                            jsonData = JSON.parse(res.result);
                        } catch {
                            wx.showToast({
                                title: '无效的二维码',
                                icon: 'error'
                            })
                        }
                        if (jsonData.machineCode) {
                            _this.getMachineRequest(jsonData.machineCode);
                        } else {
                            wx.showToast({
                                title: '二维码格式不符',
                                icon: 'error'
                            })
                        }
                    }
                });

            },
            getMachineRequest(code) {
                let _this = this;
                return machineManagerMachinePage({ code }).then(res => {
                    if (res.data.status === 200) {
                        console.log('查询结果', res.data.res)
                        wx.showModal({
                            title: '扫码结果',
                            content: `识别到设备:${code},确定添加吗?`,
                            success(res) {
                                if (res.confirm) {
                                    // 去保存
                                }
                            }
                        })
                    }
                });
            },
            onDeleteMachine(machineItem) {
                let _this = this;
                uni.showModal({
                    title: '提示',
                    icon: 'error',
                    content: `确定移除"${machineItem.machineCode}吗?`,
                    success(res) {
                        if (res.confirm) {
                            workforcemanagementScheduleEmpMachineDelete({}, {
                                id: machineItem.id,
                            }).then(res => {
                                if (res.data.status === 200) {
                                    tipBar('save');
                                    _this.getPostMachineListRequest();
                                }
                            });
                        }
                    }
                });
            },
            onConfirmBtnOfSelectMachinePopup(arr) {
                console.log('得到', arr)
                this.selectMachinePopupState = false;
            },
            onCloseBtnOfSelectPicker() {
                this.selectDateTimePickerState = false;
            },
            onConfirmBtnOfSelectPicker(e) {
                this.$set(this.searchParams, 'belongDate', formatDate(e.value));
                this.$set(this.searchParams, 'shiftName', '');
                this.$set(this.searchParams, 'groupName', '');
                this.scheduleShiftList = [];
                this.scheduleGroupList = [];
                this.postMachineList = [];
                this.selectDateTimePickerState = false;
                this.getPostMachineListRequest();
            },
            getPostMachineListRequest() {
                if (!this.searchParams.workshopId || !this.searchParams.belongDate) return;
                return workforceManagementScheduleEmpMachineMy({
                    workshopId: this.searchParams.workshopId,
                    belongDate: this.searchParams.belongDate
                }).then(res => {
                    if (res.data.status === 200) {
                        this.scheduleShiftList = res.data.res || [];
                        if (this.scheduleShiftList.length) {
                            this.scheduleGroupList = this.scheduleShiftList[0].scheduleGroupList;
                            // 默认回显首个班次、班组、岗位的机台
                            this.$set(this.searchParams, 'shiftName', this.scheduleShiftList[0].shiftName);
                            this.$set(this.searchParams, 'scheduleShiftId', this.scheduleShiftList[0].scheduleShiftId);
                            if (this.scheduleGroupList && this.scheduleGroupList.length) {
                                this.postMachineList = this.scheduleGroupList[0].machineList;
                                this.$set(this.searchParams, 'groupName', this.scheduleGroupList[0].groupName);
                            }
                        }
                    }
                })
            },
            onSelectShift() {
                let _this = this;
                uni.showActionSheet({
                    itemList: _this.scheduleShiftList.map(x => x.shiftName),
                    success(res) {
                        _this.scheduleGroupList = _this.scheduleShiftList[res.tapIndex].scheduleGroupList;
                        _this.$set(_this.searchParams, 'shiftName', _this.scheduleShiftList[res.tapIndex].shiftName);
                        _this.$set(_this.searchParams, 'groupName', '');
                        _this.postMachineList = [];
                    }
                });
            },
            onSelectGroup() {
                let _this = this;
                uni.showActionSheet({
                    itemList: _this.scheduleGroupList.map(x => x.groupName),
                    success(res) {
                        _this.$set(_this.searchParams, 'groupName', _this.scheduleGroupList[res.tapIndex].groupName);
                        _this.postMachineList = _this.scheduleGroupList[res.tapIndex].machineList;
                    }
                });
            }
        },
        onShow() {
        },
        onLoad() {
            this.defaultTime = formatTime(Date.now());
            this.empInfo = getApp().globalData.defaultEmp || {};
            this.$set(this.searchParams, 'workshopId', this.empInfo.workshopId);
            this.$set(this.searchParams, 'belongDate', formatDate(Date.now()));
            this.getPostMachineListRequest();
        }
    }
</script>
<style scoped lang="scss">
    $footer_box_height: 124rpx;
    .my-machine-container {
        height: 100vh;
        overflow: auto;
        padding-bottom: $footer_box_height;
        box-sizing: border-box;
        .article-box {
            margin-top: 24rpx;
            padding: 0rpx 24rpx 24rpx 24rpx;
            background: #fff;
            .machine-container {
                display: flex;
                flex-wrap: wrap;
                border-radius: 12rpx;
                .machine-item {
                    width: calc(100% / 4);
                    padding: 4rpx;
                    box-sizing: border-box;
                }
            }
        }
        .search-box {
            height: 84rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            border-bottom: solid 1rpx #e8eaec;
            border-top: solid 1rpx #e8eaec;
            background: #fff;
            color: #515a6e;
            font-size: 26rpx;
            .search-box-item {
                width: calc(100% / 3);
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                border-right: solid 1rpx #eee;
            }
        }
        .footer-box {
            width: 100%;
            height: $footer_box_height;
            position: fixed;
            bottom: 0;
            left: 0;
            border-top: solid 1rpx #e8eaec;
            background: #fff;
            padding: 0 32rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            z-index: 1000;
        }
        .head-box {
            display: flex;
            padding: 60rpx 28rpx;
            background: #fff;
            .head-box-avatar {
                position: relative;
                .head-box-avatar-gender {
                    position: absolute;
                    right: 0;
                    top: -10rpx;
                }
            }
            .head-box-info {
                font-size: 28rpx;
                margin-left: 20rpx;
                color: #515a6e;
                .head-box-info-name {
                    font-size: 34rpx;
                    color: #17233d;
                }
            }
        }
    }
</style>
